<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>chart</title>
   		<style>
		   html,body{overflow:hidden;padding:0;margin:0;}
		</style>
		<{script src="moo.js" app="desktop"}>
		<{script src="coms/highcharts.js" app="desktop"}>
	</head>
	<body>
		
		<!-- 3. Add the container -->
		<div id="container" style="width: 100%; height: 220px; margin: 0 auto"></div>
		<script type="text/javascript">
		
			var chart;
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						defaultSeriesType: 'column',
						margin: [ 50, 50, 50, 80]
					},
					
					title: {
						text: ''
					},
					xAxis: { 
						categories: <{$categories}>,
						labels: {
							rotation: -10,
							align: 'right',
							style: {
								font: 'normal 12px Verdana, sans-serif'
							}
						 }
					},
					yAxis: {
						min: 0,
						title: {
							text: ''
						}
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								this.x +': '+ this.y + '%';
						}
					},
					legend: {
						enabled:false
					},
					series: [$merge({
						 dataLabels: {
							enabled: true,
							color: '#000',
                            formatter: function() {
                                return this.y +'%';
                            }
						}},<{$data}>)
					]
				});

  
				
		</script>
		
				
	</body>
</html>